<template>
  <div class="app-container">
    <el-button @click="clickFn">清空</el-button>
    <el-button @click="ComputedFn">区分</el-button>
    <!-- <el-button @click="fillFn">填充</el-button> -->
    <el-button @click="playFn">计算月复购率</el-button>
    <el-button @click="weekFn">周复购率</el-button>
    <el-button @click="dayFn">日复购率</el-button>

    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { getFormatDate_XLSX, parseTime, findovertwo, getZeroTimeStamps } from '@/utils'

export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      arrData: [],
      tableData: [],
      tableHeader: [],
      countData: [],
      countHeader: [],
      dateArr: [] // 充值 时间记录
    }
  },
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    // 导入表格
    handleSuccess({ results, header }) {
      const dateArr = []
      results.map(item => {
        dateArr.push(getFormatDate_XLSX(item['充值时间']) - 0)
        item['充值时间'] = getFormatDate_XLSX(item['充值时间']) - 0
      })
      // parseTime('{y}-{m}-{d} {h}:{i}')
      this.dateArr = dateArr
      this.tableData = results
      this.tableHeader = header
      this.$store.commit('user/SET_TABLE_DATA', results) // 存到vuex
      this.$store.dispatch('user/setHeader', header)
    },
    // 计算封装方法
    calculation(arr) {
      let momCount = 0
      const nameArr = arr.map(item => {
        momCount += item['计数']
        return item['充值账号']
      })
      return findovertwo(nameArr) / this.tableData.length
    },
    // 计算分母
    momNumberFn(time, allData) {
      debugger
     const cutoffData = allData.filter(x => {
        if (x.time < time) {
          return x
        }
      })
      let number = 0
      cutoffData.map(y => {
        number += y.data.length
      })
      return number
    },
    weekFn() { // 周
      const arr = []
      if (this.tableData) {
        const timeArr = getZeroTimeStamps(Math.min(...this.dateArr) / 1000, Math.max(...this.dateArr) / 1000) // 计算最小时间戳和最大时间戳之间的天数,并返回每一天的零点时间戳
        const weekTimeStr = timeArr.filter((i, index) => {
          if ((index % 6 == 0) || index == timeArr.length -1) {
            return i
          }
        })
        const intervals = weekTimeStr.slice(1).map((currentValue, index) => [weekTimeStr[index], currentValue])
        intervals.map(x => {
          const intervalData = this.tableData.filter(y => {
            // debugger
            if (x[0] < (y['充值时间'] / 1000) && (y['充值时间'] / 1000) < x[1]) {
              return y
            }
          })
          arr.push({ time: x, data: intervalData })
        })
        let addDayNumber = 0
        const dayData = arr.map(item => {
          const dayNumber = this.calculation(item.data) // 分子
          addDayNumber += dayNumber
          const momNumber = this.momNumberFn(item.time[1], this.arrData) == 0 ? 1 : this.momNumberFn(item.time[1], this.arrData) // 不让分母为0,正常情况分母为0,分子必为0
          console.log('-----addDayNumber', addDayNumber, momNumber);

          return {time: parseTime(item.time[0]) + '至' + parseTime(item.time[1]), value: addDayNumber/ momNumber}
        })

        console.log('周复购率', dayData);
        // this.countData = dayData
      }
    },
    dayFn() {
      const arr = []
      if (this.tableData) {
        const timeArr = getZeroTimeStamps(Math.min(...this.dateArr) / 1000, Math.max(...this.dateArr) / 1000) // 计算最小时间戳和最大时间戳之间的天数,并返回每一天的零点时间戳
        timeArr.map(x => {
          const intervalData = this.tableData.filter(y => {
            if (x < (y['充值时间'] / 1000) && (y['充值时间'] / 1000) < (x + 60 * 1 * 60 * 24)) {
              return y
            }
          })
          arr.push({ time: x, data: intervalData })
        })
        // console.log('arr', arr) // 按天筛选的每天的数据
        let addDayNumber = 0
        const dayData = arr.map(item => {
          const dayNumber = this.calculation(item.data) // 分子
          addDayNumber += dayNumber
          const momNumber = this.momNumberFn(item.time, arr) == 0 ? 1 : this.momNumberFn(item.time, arr) // 不让分母为0,正常情况分母为0,分子必为0
          console.log('-----addDayNumber', addDayNumber, momNumber);
          return {time: parseTime(item.time), value: addDayNumber/ momNumber}
        })

        this.arrData = arr
        console.log('日复购率', dayData);
        // this.countData = [{ '全部复购率': moonNumber }]
      }
    },
    playFn() { // 计算月复购率
      const arr = []
      if (this.tableData) {
        const moonNumber = this.calculation(this.tableData) // 计算本月 -> 整个数组都是
        console.log('月复购率', moonNumber);
        this.countData = [{ '全部复购率': moonNumber }]
      }
    },
    fillFn() {
      this.tableData = this.$store.state.user.tableData
      this.tableHeader = this.$store.state.user.tableHeader
    },
    // 清空数据
    clickFn() {
      this.tableData = []
      this.tableHeader = []
      this.$store.commit('user/DEL_TABLE')
    },
    ComputedFn() {
      let label = []
      const data = []
      this.tableData.map(item => {
        // console.log(item['标签'])
        label.push(item['标签'])
      })
      label = new Set(label)
      const lableArr = Array.from(label)
      lableArr.map((x, index) => {
        const aa = this.tableData.filter(item => {
          if (item['标签'] === x) {
            return item
          }
        })
        data.concat(aa)
      })
    }
  }
}
</script>
